<!--
 * @Author: your name
 * @Date: 2020-12-28 17:53:01
 * @LastEditTime: 2020-12-31 14:49:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \basicvue\vuehtml\vueindex.html
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/common.css">
    <link rel="stylesheet" href="../assets/css/vue.css">
    <script src="../assets/js/vue.js"></script>
    <style>
        .classA{
            color:red;
        }
        .classB{
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div id="app">
        <a href="../index.html" class="retu">BACK</a>
        <h1>v-bind是处理HTML中标签属性的</h1>
        <img v-bind:src="imgSrc" width="200px">
        <br>
        <span>v-bind的缩写是 : </span>
        <a v-bind:href="url">后盾网</a>
        <a :href="url">后盾人</a>
        <h1>绑定css样式</h1>
        <span>在工作中我们经常使用v-bind来绑定css样式</span>
        <br>
        <div :class="className">1:绑定classA</div>
        <span>绑定classA并且进行判断,当isOk为true的时候显示样式,在isOk为false的时候不显示样式</span>
        <div :class="{classA:isOk}">2:绑定class中的判断</div>
        <h1>绑定class中的数组</h1>
        <span>class中绑定的数组需要在vue的data中声明</span>
        <div :class="[classA,classB]">3:绑定class中的数组</div>
        <h1>绑定class中的三元表达式</h1>
        <div :class="isOk ? classA : classB">4,绑定class中的三元表达式</div>
        <h1>绑定style</h1>
        <div :style="{color:color,fontSize:fontSize}">5,绑定style</div>
        <h1>使用对象绑定style样式</h1>
        <div :style="styleObject">6,使用对象绑定style样式</div>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                imgSrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1238229328,4118222302&fm=26&gp=0.jpg',
                url : 'http://www.houdunren.com',
                className:'classA',
                isOk:false,
                classA:'classA',
                classB:'classB',
                color:'green',
                fontSize:'25px',
                styleObject:{
                    fontSize:'25px',
                    color:'#ffffff',
                    background:'#8e44ad'
                }
            }
        });
    </script>
</body>
</html>